// 创建新的axios实例
// 设置拦截器，如果有token将token添加到请求头
// 3. 响应拦截器：1 剥离无效数据（例如外层嵌套data） 2.处理token失效
// 4. 导出一个函数，调用配置好的axios实例方法。返回值是promise对象
import axios from 'axios'
// 导入token
import store from '@/store/index'
// 导入路由模块
import router from '@/router' // 这里导入自己创建的路由
export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'// 定义并导出基准地址，原因：其他地方也要用到url
const instance = axios.create({
  baseURL,
  timeout: 5000 // 定义超时时间
})
// 请求  拦截              // 参1拦截时做什么  参2拦截失败做什么
instance.interceptors.request.use(config => {
// 拦截业务逻辑 进行请求配置的修改
// 判断本地是否有token，有头部携带，没有就过
  const { profile } = store.state.user
  if (profile && profile.token) { // 配置携带token
    config.headers.Authorization = `Bearer ${profile.token}`
  }
  return config
}, err => {
  return Promise.reject(err)
})
// 响应拦截器   // 这里也是响应成功和失败的回调
instance.interceptors.response.use(res => res.data, err => { // 剥离axios自动加的一层data
  // 失败时的业务
  // 401状态码 登录失效（token失效）
  if (err.response && err.response.status === 401) { // 前面的排除无响应情况
    // 清空本地无效用户信息
    store.commit('user/setUser', {})//
    // 2.跳转到登录页
    // 当前路由地址
    // 1.组件例如：'/user?a=10' this.$route.path, // '/user' *另外一个属性 $route.fullpath === '/user?a=10' 完整地址
    // 在js中获取路由地址  router.currentRouter.value.fullpath（当前路由的完整信息包含参数） === $route 等价 但是在vue3中该属性为ref包裹
    const fullPath = encodeURIComponent(router.currentRouter.value.fullpath) // 转码避免出现特殊字符导致获取参数出问题
    // 这里使用的是query拼接传参，可能会出现/login?redirectUrl=/user?a=10两个=造成query解析出现问题所以需要url转码
    router.push({ path: '/login', query: { redirectUrl: fullPath } }) // 此处需携带当前页面的地址
  }
  return Promise.reject(err)
})

// 请求工具函数
export default (url, method, submitData) => {
  // 负责发请求
  return instance({
    // get 传参 params
    // 其他 使用 data传参
    url,
    method,
    // 通过[]设置一个动态的key data or params  []可以写js表达式，最后的值为表达式结果
    // 这里可能用户传入的method get Get GET 将method转换为小写
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData// 动态插入属性

  })
}
